<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
  <!--   内嵌式  -->
     <meta charset="UTF-8">
     <style>
        /*  通过选择器确定样式的作用范围*/
        input{
         display:block;
         width: 60px;
         height: 40px;
         background-color: aqua;
         color: beige;
         border: 3px solid green;
         font-size: 22px;
         font-family: '隶书';
         line-height: 30px;
         border-radius: 5px
        }
     </style>

<body>
    <!--
    CSS引入方式
     方式一： 行内式:
                通过元素开始标签的style属性引入, 
                语法为 样式名:样式值; 样式名:样式值;... ...
                缺点: 1.代码复用度低，不利于维护
                      2.css样式代码和html结构代码交织在一起，
                        影响阅读，影响文件大小，影响性能

      方式二：内嵌式：
                通过在head标签定义本页面的公共样式 
                样式要在head标签中，通过一对style标签定义
                注释为/* */
                内嵌样式仅仅能作用于当前文件,
                代码复用度还是不够,不利于网站风格统一  
                

    -->
<!--    行内式   -->
    <input 
         type="button"
         value="按钮"
         style="
         display:block;
         width: 60px;
         height: 40px;
         background-color: aqua;
         color: beige;
         border: 3px solid green;
         font-size: 22px;
         font-family: '隶书';
         line-height: 30px;
         border-radius: 5px;
         "/>
         <br>
<!--     内嵌式   -->
     <input type="button"  value="按纽1">
     <input type="button"  value="按纽2">

</body>
</html>